<template>
	<Container>
		<view class="header">
			<view v-for="(item, index) in assignment.optionArticles" :key="index" :class="{ articleLight: index === current }">
				<image class="img" :src="item.imageUrl" mode="aspectFit"></image>
			</view>
		</view>
		<Question :question="assignment.questionName" />
		<Record ref="audio" @recordFinish="recordFinish" :isStart="!isStart" :answerText="assignment.answerTexts" :typeCode="assignment.typeCode" />
	</Container>
</template>

<script>
import { mixins } from '../../../common/mixins/assignmentDefault.js'
import Question from '../questionName.vue'
import Container from '../container.vue'
import Record from '../record.vue'
export default {
	mixins: [mixins],
	components: { Question, Container,Record },
	data() {
		return {
			current: -1,
			isStart: false
		}
	},
	methods: {
		articleAudio: async function() {
			this.current++
			const data = await this.parseTextAudio({
				text: this.assignment.optionArticles[this.current].audioText,
				speaker: this.assignment.optionArticles[this.current].speaker
			})
			this.dialogueAudio({
				src: data,
				end: () => {
					if (this.current === this.assignment.optionArticles.length - 1) {
						this.current = -1
						this.isStart = true
						return
					} else {
						setTimeout(() => {
							this.articleAudio()
						}, 1000)
					}
				}
			})
		}
	},
	watch: {
		questionPress: function(bool) {
			if (!bool) {
				this.articleAudio()
			}
		}
	}
}
</script>

<style scoped lang="stylus">
.header
	height 50vh
	width 720rpx
	border-radius 70rpx
	border 12rpx solid #FCC77D
	background white
	box-sizing border-box
	display flex
	justify-content center
	align-items center
	position relative
	margin 5vh 0
	view
		width 50%
		height 100%
		display flex
		justify-content center
		align-items center
		image
			width 80%
			height 80%
</style>
